<template>
	<view>
	<!-- 	<cu-custom :isBack="true" :bgColor="bgLiner" >
			<block slot="backText">返回</block>
			<block slot="content">订单支付</block>
		</cu-custom> -->
		
		<!-- #ifdef H5 -->
		
		<cu-custom class="bgLiner" :isBack="true" style="position: fixed;top: 0; width: 100%;">
			<block slot="backText">返回</block>
			<block slot="content">订单支付</block>
		</cu-custom>
		<view style="padding-top: 46px;"></view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN || APP-PLUS -->
		
		<cu-custom :bgColor="'bgLiner'"  :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">订单支付</block>
		</cu-custom>
		
		<!-- #endif -->
		
		<view class="bg-style">
			<view class="flex align-center justify-center remainder">
				<view class="text-black">支付剩余时间 {{ countdown  }}</view>
			</view>
			<view class="flex align-center justify-center">
				<view class="text-black text-bold text-price text-xxl">{{orderInfo.paymentPrice}}</view>
			</view>
		</view>
		<view class="margin-sm">
			<radio-group class="block" @change="radioChange">
				<view class="cu-list menu text-left">
					<!-- #ifdef APP-PLUS || MP-WEIXIN  -->
					<view class="cu-item cu-item-style">
						<label class="flex justify-between align-center flex-sub">
							<image class="imgstyle" :src="wxzf" mode=""></image>
							<view class="flex-sub">微信支付</view>
							<radio class="round" :class="paymentType=='1'?'checked':''"
								:checked="paymentType=='1'?true:false" value="1" style="transform: scale(0.8);"></radio>
						</label>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS || MP-ALIPAY ||  H5  -->
					<view class="cu-item cu-item-style">
						<label class="flex justify-between align-center flex-sub">
							<image class="imgstyle" :src="zfb" mode=""></image>
							<view class="flex-sub">支付宝支付</view>
							<radio class="round" :class="paymentType=='2'?'checked':''"
								:checked="paymentType=='2'?true:false" value="2" style="transform: scale(0.8);"></radio>
						</label>
					</view>
					<!-- #endif -->
				</view>
			</radio-group>
		</view>
		<button class="paymentBtn" :class="'bg-'+ theme.themeColor"
			@tap="paySub">确认支付</button>
	</view>

</template>

<script>
	import config from 'config/env'
	import {
		unifiedPay,
	} from '@/utils/pay.js';
	import {
		orderCancel,
		getById,
		prepay
	} from '@/api/orderinfo.js';
	export default {
		data() {
			return {
				theme: getApp().globalData.theme,
				orderInfo: {},
				paymentType: '1',
				wxzf:`${config.imgSrcL}wxzfzf.png`,
				zfb:`${config.imgSrcL}zfbzf.png`,
				
				countdown: '00:30', // 替换为你的初始倒计时时间
				intervalId: null // 存储定时器ID
			}
		},
		onLoad(option) {
			getApp().initPage().then(res => {
				this.getOrder(option.id)
				// #ifdef MP-WEIXIN
				this.paymentType = '1';
				// #endif
				// #ifdef MP-ALIPAY
				this.paymentType = '2';
				// #endif
				// #ifdef APP-PLUS
				this.paymentType = '1';
				// #endif
				
				
			})
		},
		onShow() {
			// 初始化倒计时
		    this.startCountdown();
		},
		methods: {
			//订单倒计时
			updateCountdown() {
				// 将倒计时的逻辑实现在这里，例如每秒钟减去一秒并更新 `countdown` 变量
				// 示例：假设倒计时格式是 'mm:ss'
				let timeArray = this.countdown.split(':');
				let minutes = Number(timeArray[0]);
				let seconds = Number(timeArray[1]);
			
				if (seconds > 0) {
				  seconds--;
				} else {
				  if (minutes > 0) {
					minutes--;
					seconds = 59;
				  } else {
					clearInterval(this.intervalId); // 倒计时结束后清除定时器
					// 执行关闭订单的操作
					this.closeOrder();
					return;
				  }
				}
			
				// 格式化倒计时为两位数
				let formattedMinutes = String(minutes).padStart(2, '0');
				let formattedSeconds = String(seconds).padStart(2, '0');
			
				// 更新倒计时变量
				this.countdown = `${formattedMinutes}:${formattedSeconds}`;
			},
			async closeOrder() {
			    // 执行关闭订单的逻辑
			    // 这里可以添加具体的代码，例如发送请求关闭订单、更新订单状态等
			    console.log('订单已关闭');
				// const { data,ok } = await orderCancel(id)
				uni.navigateTo({
				  url: '/subpkg/order/order-list/index?status=1'
				})
			},
			startCountdown() {
			    this.updateCountdown(); // 先更新一次倒计时
			
			    // 设置定时器，每秒钟更新一次倒计时
			    this.intervalId = setInterval(() => {
			      this.updateCountdown();
			    }, 1000);
			},
			//订单倒计时end
			
			getOrder(id) {
				getById(id).then(res => {
					this.orderInfo = res.data;
				})
			},
			
			/**
			 * 取消订单
			 */
			onCancel() {
				orderCancel(id).then(res => {
					let data = res.data;
					_this.$emit('orderCancel', data);
				});
			},
			
			/**
			 * 选择支付方式
			 */
			radioChange(e) {
				this.paymentType = e.detail.value;
			},
			paySub() {
				let prepayParams = {};
				if (this.paymentType == '1') {
					//微信支付
					prepayParams = {
						id: this.orderInfo.id,
						paymentType: this.paymentType,
						// #ifdef MP 
						tradeType: 'WX_JSAPI_PAY',
						// #endif
						// #ifdef H5
						tradeType: 'WX_H5_PAY',
						// #endif
						// #ifdef APP-PLUS
						tradeType: 'WX_APP_PAY',
						// #endif
					}
				} else {
					//支付宝支付
					prepayParams = {
						id: this.orderInfo.id,
						paymentType: this.paymentType,
						// #ifdef MP 
						tradeType: 'ALI_JSAPI_PAY',
						// #endif
						// #ifdef H5
						tradeType: 'ALI_H5_PAY',
						// returnUrl: 'https://mall.ihuanxing.cn/subpkg/order/order-pay/index?id' + this.orderInfo.id,
						returnUrl: 'http://localhost:9999/subpkg/order/order-pay/index?id' + this.orderInfo.id, // 同步跳转地址，仅支持http/https
						// quitUrl: 'https://mall.ihuanxing.cn/subpkg/order/order-pay/index?id' + this.orderInfo.id,
						quitUrl: 'http://localhost:9999/subpkg/order/order-pay/index?id' + this.orderInfo.id, //用户付款中途退出返回商户网站的地址
						// #endif
						// #ifdef APP-PLUS
						tradeType: 'ALI_APP_PAY',
						// #endif
					}
				}

				prepay(prepayParams).then(res => {
					let data = res.data;
					unifiedPay(data, this.orderInfo, '/subpkg/order/order-pay-result/index?id=' + this.orderInfo.id, this.paymentType)
				})

			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.imgstyle{
		width: 44.53rpx;
		height: 37.5rpx;
		margin-right: 22.27rpx;
	}
	.bgLiner{
		background: #fff;
		color: #000;
	}
	.bg-style{
		padding: 50px 0 40px 0;
		.remainder{
			margin-bottom: 20.98rpx;
			font-size: 26rpx;
		}
		.text-price{
		  font-size: 42rpx;	
		}
	}
	.cu-item-style{
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.02);
		border-radius: 18rpx;
	}
	.paymentBtn{
		position: fixed;
		bottom: 103.13rpx;
		width: 633rpx;
		height: 70rpx;
		line-height: 70rpx;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 42rpx;
		font-size: 26rpx;
		letter-spacing: 1px;
	}
</style>
